<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>用于迁移的构建版本 | Vue.js</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" href="/vue3/logo.png">
    <link rel="manifest" href="/vue3/manifest.json">
    <link rel="apple-touch-icon" href="/vue3/images/icons/apple-icon-152x152.png">
    <script src="https://player.youku.com/iframeapi"></script>
    <meta name="description" content="Vue.js - The 渐进式 JavaScript 框架">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/vue3/assets/css/0.styles.9bf58a16.css" as="style"><link rel="preload" href="/vue3/assets/js/app.9f011487.js" as="script"><link rel="preload" href="/vue3/assets/js/11.bea13863.js" as="script"><link rel="preload" href="/vue3/assets/js/140.73a6c08b.js" as="script"><link rel="preload" href="/vue3/assets/js/23.f23a1976.js" as="script"><link rel="prefetch" href="/vue3/assets/js/1.98516ad1.js"><link rel="prefetch" href="/vue3/assets/js/100.94330a5d.js"><link rel="prefetch" href="/vue3/assets/js/101.560a6b49.js"><link rel="prefetch" href="/vue3/assets/js/102.f12c4d91.js"><link rel="prefetch" href="/vue3/assets/js/103.be709996.js"><link rel="prefetch" href="/vue3/assets/js/104.49fdebb1.js"><link rel="prefetch" href="/vue3/assets/js/105.df17d42d.js"><link rel="prefetch" href="/vue3/assets/js/106.fa0a51b7.js"><link rel="prefetch" href="/vue3/assets/js/107.392361bf.js"><link rel="prefetch" href="/vue3/assets/js/108.af6fc4d6.js"><link rel="prefetch" href="/vue3/assets/js/109.18bcf602.js"><link rel="prefetch" href="/vue3/assets/js/110.052b8c4c.js"><link rel="prefetch" href="/vue3/assets/js/111.528533a3.js"><link rel="prefetch" href="/vue3/assets/js/112.28359168.js"><link rel="prefetch" href="/vue3/assets/js/113.190e7aff.js"><link rel="prefetch" href="/vue3/assets/js/114.dddc32bb.js"><link rel="prefetch" href="/vue3/assets/js/115.7924a11d.js"><link rel="prefetch" href="/vue3/assets/js/116.5836841c.js"><link rel="prefetch" href="/vue3/assets/js/117.1e3523ad.js"><link rel="prefetch" href="/vue3/assets/js/118.fda02ea3.js"><link rel="prefetch" href="/vue3/assets/js/119.c56ed999.js"><link rel="prefetch" href="/vue3/assets/js/12.11fdef37.js"><link rel="prefetch" href="/vue3/assets/js/120.14653326.js"><link rel="prefetch" href="/vue3/assets/js/121.5bdc69d1.js"><link rel="prefetch" href="/vue3/assets/js/122.ea246bef.js"><link rel="prefetch" href="/vue3/assets/js/123.1a041b0d.js"><link rel="prefetch" href="/vue3/assets/js/124.4849397b.js"><link rel="prefetch" href="/vue3/assets/js/125.f8a4d9a1.js"><link rel="prefetch" href="/vue3/assets/js/126.e6f8c88f.js"><link rel="prefetch" href="/vue3/assets/js/127.bb0d0c14.js"><link rel="prefetch" href="/vue3/assets/js/128.6fcdf065.js"><link rel="prefetch" href="/vue3/assets/js/129.d37419cf.js"><link rel="prefetch" href="/vue3/assets/js/13.84b5a427.js"><link rel="prefetch" href="/vue3/assets/js/130.2ff76428.js"><link rel="prefetch" href="/vue3/assets/js/131.dbd74031.js"><link rel="prefetch" href="/vue3/assets/js/132.b4ca1a54.js"><link rel="prefetch" href="/vue3/assets/js/133.95a81c57.js"><link rel="prefetch" href="/vue3/assets/js/134.da6a25f1.js"><link rel="prefetch" href="/vue3/assets/js/135.46cd4ce4.js"><link rel="prefetch" href="/vue3/assets/js/136.c908c444.js"><link rel="prefetch" href="/vue3/assets/js/137.838c736d.js"><link rel="prefetch" href="/vue3/assets/js/138.5f56ac41.js"><link rel="prefetch" href="/vue3/assets/js/139.2d3218e7.js"><link rel="prefetch" href="/vue3/assets/js/14.ccde2ff7.js"><link rel="prefetch" href="/vue3/assets/js/141.e6e97fa2.js"><link rel="prefetch" href="/vue3/assets/js/142.78b66660.js"><link rel="prefetch" href="/vue3/assets/js/143.18a5f522.js"><link rel="prefetch" href="/vue3/assets/js/144.007967ab.js"><link rel="prefetch" href="/vue3/assets/js/145.69c6c622.js"><link rel="prefetch" href="/vue3/assets/js/146.5eb14458.js"><link rel="prefetch" href="/vue3/assets/js/147.01b7b88c.js"><link rel="prefetch" href="/vue3/assets/js/148.c4464ffa.js"><link rel="prefetch" href="/vue3/assets/js/149.66883751.js"><link rel="prefetch" href="/vue3/assets/js/15.6957b547.js"><link rel="prefetch" href="/vue3/assets/js/150.03ccd0c3.js"><link rel="prefetch" href="/vue3/assets/js/151.5cb25376.js"><link rel="prefetch" href="/vue3/assets/js/152.51fa843b.js"><link rel="prefetch" href="/vue3/assets/js/153.c280bbfc.js"><link rel="prefetch" href="/vue3/assets/js/154.3c1208bb.js"><link rel="prefetch" href="/vue3/assets/js/155.f2bec114.js"><link rel="prefetch" href="/vue3/assets/js/156.9d563e5f.js"><link rel="prefetch" href="/vue3/assets/js/157.09a62483.js"><link rel="prefetch" href="/vue3/assets/js/158.e8ee954d.js"><link rel="prefetch" href="/vue3/assets/js/159.806c0da5.js"><link rel="prefetch" href="/vue3/assets/js/16.1c3a9fe2.js"><link rel="prefetch" href="/vue3/assets/js/160.70fe7ee3.js"><link rel="prefetch" href="/vue3/assets/js/161.7b67e86f.js"><link rel="prefetch" href="/vue3/assets/js/162.d2cb71f8.js"><link rel="prefetch" href="/vue3/assets/js/163.c2f8c96a.js"><link rel="prefetch" href="/vue3/assets/js/164.c0ce5d22.js"><link rel="prefetch" href="/vue3/assets/js/165.dd31fc10.js"><link rel="prefetch" href="/vue3/assets/js/166.861df1bd.js"><link rel="prefetch" href="/vue3/assets/js/167.8cade3be.js"><link rel="prefetch" href="/vue3/assets/js/168.d384c54a.js"><link rel="prefetch" href="/vue3/assets/js/169.266b17c8.js"><link rel="prefetch" href="/vue3/assets/js/17.13ae2912.js"><link rel="prefetch" href="/vue3/assets/js/170.8da5cca1.js"><link rel="prefetch" href="/vue3/assets/js/171.59233d62.js"><link rel="prefetch" href="/vue3/assets/js/172.e2ff7db9.js"><link rel="prefetch" href="/vue3/assets/js/173.4fae5fdf.js"><link rel="prefetch" href="/vue3/assets/js/174.25d65654.js"><link rel="prefetch" href="/vue3/assets/js/175.0fd8e932.js"><link rel="prefetch" href="/vue3/assets/js/176.afbb20d7.js"><link rel="prefetch" href="/vue3/assets/js/177.3fce4ef4.js"><link rel="prefetch" href="/vue3/assets/js/178.a69eab8f.js"><link rel="prefetch" href="/vue3/assets/js/179.b9c69246.js"><link rel="prefetch" href="/vue3/assets/js/18.2176f64f.js"><link rel="prefetch" href="/vue3/assets/js/180.80eaf61f.js"><link rel="prefetch" href="/vue3/assets/js/181.8c9ea68f.js"><link rel="prefetch" href="/vue3/assets/js/182.363237b2.js"><link rel="prefetch" href="/vue3/assets/js/183.1bcce34d.js"><link rel="prefetch" href="/vue3/assets/js/184.63965c38.js"><link rel="prefetch" href="/vue3/assets/js/185.145d17f7.js"><link rel="prefetch" href="/vue3/assets/js/186.01c28041.js"><link rel="prefetch" href="/vue3/assets/js/187.651fc5e1.js"><link rel="prefetch" href="/vue3/assets/js/188.371a53d8.js"><link rel="prefetch" href="/vue3/assets/js/189.21a8c4f3.js"><link rel="prefetch" href="/vue3/assets/js/19.f35e6099.js"><link rel="prefetch" href="/vue3/assets/js/2.655ed906.js"><link rel="prefetch" href="/vue3/assets/js/20.6a9108db.js"><link rel="prefetch" href="/vue3/assets/js/21.b90deaac.js"><link rel="prefetch" href="/vue3/assets/js/22.2da4161c.js"><link rel="prefetch" href="/vue3/assets/js/24.0f4c4cde.js"><link rel="prefetch" href="/vue3/assets/js/25.3a155505.js"><link rel="prefetch" href="/vue3/assets/js/26.d7a45b3e.js"><link rel="prefetch" href="/vue3/assets/js/27.3c237b85.js"><link rel="prefetch" href="/vue3/assets/js/28.1722182e.js"><link rel="prefetch" href="/vue3/assets/js/29.158159ee.js"><link rel="prefetch" href="/vue3/assets/js/3.9e67029d.js"><link rel="prefetch" href="/vue3/assets/js/30.085c3faf.js"><link rel="prefetch" href="/vue3/assets/js/31.d95eaf7d.js"><link rel="prefetch" href="/vue3/assets/js/32.75be14cd.js"><link rel="prefetch" href="/vue3/assets/js/33.b9adbce6.js"><link rel="prefetch" href="/vue3/assets/js/34.ef96058c.js"><link rel="prefetch" href="/vue3/assets/js/35.f2d110b9.js"><link rel="prefetch" href="/vue3/assets/js/36.11e69166.js"><link rel="prefetch" href="/vue3/assets/js/37.d51d98ce.js"><link rel="prefetch" href="/vue3/assets/js/38.ba303c3e.js"><link rel="prefetch" href="/vue3/assets/js/39.7af701c4.js"><link rel="prefetch" href="/vue3/assets/js/4.2768033f.js"><link rel="prefetch" href="/vue3/assets/js/40.50b39df3.js"><link rel="prefetch" href="/vue3/assets/js/41.377521c6.js"><link rel="prefetch" href="/vue3/assets/js/42.3b63f9c9.js"><link rel="prefetch" href="/vue3/assets/js/43.98898a3b.js"><link rel="prefetch" href="/vue3/assets/js/44.29a6e6a2.js"><link rel="prefetch" href="/vue3/assets/js/45.7d0883fe.js"><link rel="prefetch" href="/vue3/assets/js/46.4e93f7dd.js"><link rel="prefetch" href="/vue3/assets/js/47.4c629b92.js"><link rel="prefetch" href="/vue3/assets/js/48.f1bf29a9.js"><link rel="prefetch" href="/vue3/assets/js/49.a49482a4.js"><link rel="prefetch" href="/vue3/assets/js/5.175dbe8f.js"><link rel="prefetch" href="/vue3/assets/js/50.dbad5716.js"><link rel="prefetch" href="/vue3/assets/js/51.76b7354d.js"><link rel="prefetch" href="/vue3/assets/js/52.3a1a9a63.js"><link rel="prefetch" href="/vue3/assets/js/53.be592e24.js"><link rel="prefetch" href="/vue3/assets/js/54.d97c6e79.js"><link rel="prefetch" href="/vue3/assets/js/55.eff64da2.js"><link rel="prefetch" href="/vue3/assets/js/56.e3dc0e44.js"><link rel="prefetch" href="/vue3/assets/js/57.d7b38bdd.js"><link rel="prefetch" href="/vue3/assets/js/58.fdc076c9.js"><link rel="prefetch" href="/vue3/assets/js/59.9f11e0ea.js"><link rel="prefetch" href="/vue3/assets/js/6.c6369861.js"><link rel="prefetch" href="/vue3/assets/js/60.a818862d.js"><link rel="prefetch" href="/vue3/assets/js/61.bb9ab96c.js"><link rel="prefetch" href="/vue3/assets/js/62.116aefff.js"><link rel="prefetch" href="/vue3/assets/js/63.be6c07d0.js"><link rel="prefetch" href="/vue3/assets/js/64.0ad95216.js"><link rel="prefetch" href="/vue3/assets/js/65.f8749c54.js"><link rel="prefetch" href="/vue3/assets/js/66.7680f482.js"><link rel="prefetch" href="/vue3/assets/js/67.6fba4d5a.js"><link rel="prefetch" href="/vue3/assets/js/68.ed63b04b.js"><link rel="prefetch" href="/vue3/assets/js/69.73b3bf13.js"><link rel="prefetch" href="/vue3/assets/js/7.cd1985fe.js"><link rel="prefetch" href="/vue3/assets/js/70.6e7dc295.js"><link rel="prefetch" href="/vue3/assets/js/71.32c17a2a.js"><link rel="prefetch" href="/vue3/assets/js/72.ab8b426d.js"><link rel="prefetch" href="/vue3/assets/js/73.73838f6c.js"><link rel="prefetch" href="/vue3/assets/js/74.c3c5f3e6.js"><link rel="prefetch" href="/vue3/assets/js/75.5f63164c.js"><link rel="prefetch" href="/vue3/assets/js/76.6071fb5c.js"><link rel="prefetch" href="/vue3/assets/js/77.1f274f68.js"><link rel="prefetch" href="/vue3/assets/js/78.16d4c50b.js"><link rel="prefetch" href="/vue3/assets/js/79.fc2b2e03.js"><link rel="prefetch" href="/vue3/assets/js/80.42173ce4.js"><link rel="prefetch" href="/vue3/assets/js/81.51405a99.js"><link rel="prefetch" href="/vue3/assets/js/82.be2d0e4f.js"><link rel="prefetch" href="/vue3/assets/js/83.75b4d2af.js"><link rel="prefetch" href="/vue3/assets/js/84.fbaa5717.js"><link rel="prefetch" href="/vue3/assets/js/85.60063971.js"><link rel="prefetch" href="/vue3/assets/js/86.cf80c75d.js"><link rel="prefetch" href="/vue3/assets/js/87.eca6cea7.js"><link rel="prefetch" href="/vue3/assets/js/88.3967efe4.js"><link rel="prefetch" href="/vue3/assets/js/89.bf83cb8c.js"><link rel="prefetch" href="/vue3/assets/js/90.96996b25.js"><link rel="prefetch" href="/vue3/assets/js/91.31b5ee41.js"><link rel="prefetch" href="/vue3/assets/js/92.d197feb2.js"><link rel="prefetch" href="/vue3/assets/js/93.b471c7fe.js"><link rel="prefetch" href="/vue3/assets/js/94.b4298707.js"><link rel="prefetch" href="/vue3/assets/js/95.2f91d14f.js"><link rel="prefetch" href="/vue3/assets/js/96.18b64251.js"><link rel="prefetch" href="/vue3/assets/js/97.363729fa.js"><link rel="prefetch" href="/vue3/assets/js/98.cb8f0be4.js"><link rel="prefetch" href="/vue3/assets/js/99.f62cf45d.js"><link rel="prefetch" href="/vue3/assets/js/vendors~docsearch.5cf23a03.js"><link rel="prefetch" href="/vue3/assets/js/vendors~search-page.d14326ff.js">
    <link rel="stylesheet" href="/vue3/assets/css/0.styles.9bf58a16.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><!----> <header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue3/" class="home-link router-link-active"><img src="/vue3/logo.png" alt="Vue.js" class="logo"> <span class="site-name can-hide">Vue.js</span></a> <span style="font-size:.9rem;color:#2c3e50;margin-left:20px;">非官方文档，查看官方文档请移步<a href="https://v3.cn.vuejs.org/" target="_blank">这里</a></span> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档菜单" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue3/guide/introduction.html" class="nav-link">
  教程
</a></li><li class="dropdown-item"><!----> <a href="/vue3/style-guide/" class="nav-link">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="/vue3/cookbook/" class="nav-link">
  Cookbook
</a></li><li class="dropdown-item"><!----> <a href="/vue3/examples/markdown.html" class="nav-link">
  示例
</a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/contributing/writing-guide.html" class="nav-link">
  贡献文档
</a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/migration/introduction.html" class="nav-link">
  从 Vue 2 迁移
</a></li></ul></div></div><div class="nav-item"><a href="/vue3/api/" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="生态系统" class="dropdown-title"><span class="title">生态系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          社区
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vue3/community/team/" class="nav-link">
  团队
</a></li><li class="dropdown-subitem"><a href="/vue3/community/partners.html" class="nav-link">
  合作伙伴
</a></li><li class="dropdown-subitem"><a href="/vue3/community/join/" class="nav-link">
  加入
</a></li><li class="dropdown-subitem"><a href="/vue3/community/themes/" class="nav-link">
  主题
</a></li></ul></li><li class="dropdown-item"><h4>
          官方项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vuex.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cli.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vue-test-utils.vuejs.org/guide/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://devtools.vuejs.org" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://news.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Blog
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="支持 Vue" class="dropdown-title"><span class="title">支持 Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue3/support-vuejs/#一次性捐款" class="nav-link">
  一次性捐款
</a></li><li class="dropdown-item"><!----> <a href="/vue3/support-vuejs/#周期性赞助" class="nav-link">
  周期性捐款
</a></li><li class="dropdown-item"><!----> <a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  贴纸
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://osholic.com/?utm_source=vue&amp;utm_medium=dropdown" target="_blank" rel="noopener noreferrer" class="nav-link external">
  周边
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vue.threadless.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  T-Shirt 商店
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="多语言" class="dropdown-title"><span class="title">多语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v3.vuejs.org/" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ko.vuejs.org/" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ja.vuejs.org/" target="_blank" class="nav-link external">
  日本語
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ru.vuejs.org/ru/" target="_blank" class="nav-link external">
  Русский
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/contributing/translations.html#community-translations" class="nav-link">
  更多翻译
</a></li></ul></div></div> <a href="https://github.com/vuejs/docs-next-zh-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="docsearch"></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档菜单" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue3/guide/introduction.html" class="nav-link">
  教程
</a></li><li class="dropdown-item"><!----> <a href="/vue3/style-guide/" class="nav-link">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="/vue3/cookbook/" class="nav-link">
  Cookbook
</a></li><li class="dropdown-item"><!----> <a href="/vue3/examples/markdown.html" class="nav-link">
  示例
</a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/contributing/writing-guide.html" class="nav-link">
  贡献文档
</a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/migration/introduction.html" class="nav-link">
  从 Vue 2 迁移
</a></li></ul></div></div><div class="nav-item"><a href="/vue3/api/" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="生态系统" class="dropdown-title"><span class="title">生态系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          社区
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vue3/community/team/" class="nav-link">
  团队
</a></li><li class="dropdown-subitem"><a href="/vue3/community/partners.html" class="nav-link">
  合作伙伴
</a></li><li class="dropdown-subitem"><a href="/vue3/community/join/" class="nav-link">
  加入
</a></li><li class="dropdown-subitem"><a href="/vue3/community/themes/" class="nav-link">
  主题
</a></li></ul></li><li class="dropdown-item"><h4>
          官方项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vuex.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cli.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vue-test-utils.vuejs.org/guide/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://devtools.vuejs.org" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://news.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Blog
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="支持 Vue" class="dropdown-title"><span class="title">支持 Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue3/support-vuejs/#一次性捐款" class="nav-link">
  一次性捐款
</a></li><li class="dropdown-item"><!----> <a href="/vue3/support-vuejs/#周期性赞助" class="nav-link">
  周期性捐款
</a></li><li class="dropdown-item"><!----> <a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  贴纸
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://osholic.com/?utm_source=vue&amp;utm_medium=dropdown" target="_blank" rel="noopener noreferrer" class="nav-link external">
  周边
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vue.threadless.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  T-Shirt 商店
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="多语言" class="dropdown-title"><span class="title">多语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v3.vuejs.org/" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ko.vuejs.org/" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ja.vuejs.org/" target="_blank" class="nav-link external">
  日本語
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://v3.ru.vuejs.org/ru/" target="_blank" class="nav-link external">
  Русский
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="/vue3/guide/contributing/translations.html#community-translations" class="nav-link">
  更多翻译
</a></li></ul></div></div> <a href="https://github.com/vuejs/docs-next-zh-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/vue3/guide/migration/introduction.html" class="sidebar-link">介绍</a></li><li><a href="/vue3/guide/migration/migration-build.html" aria-current="page" class="active sidebar-link">用于迁移的构建版本</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#概述" class="sidebar-link">概述</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#预期用例" class="sidebar-link">预期用例</a></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#已知的限制" class="sidebar-link">已知的限制</a></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#预期" class="sidebar-link">预期</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#升级流程" class="sidebar-link">升级流程</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#准备工作" class="sidebar-link">准备工作</a></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#安装" class="sidebar-link">安装</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#兼容性配置" class="sidebar-link">兼容性配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#全局配置" class="sidebar-link">全局配置</a></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#基于单个组件的配置" class="sidebar-link">基于单个组件的配置</a></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#针对编译器的配置" class="sidebar-link">针对编译器的配置</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#特性参考" class="sidebar-link">特性参考</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#兼容性类型" class="sidebar-link">兼容性类型</a></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#不兼容" class="sidebar-link">不兼容</a></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#部分兼容且附带注意事项" class="sidebar-link">部分兼容且附带注意事项</a></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#仅兼容-无告警" class="sidebar-link">仅兼容 (无告警)</a></li><li class="sidebar-sub-header"><a href="/vue3/guide/migration/migration-build.html#完全兼容" class="sidebar-link">完全兼容</a></li></ul></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>细节</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3/guide/migration/array-refs.html" class="sidebar-link">v-for 中的 Ref 数组</a></li><li><a href="/vue3/guide/migration/async-components.html" class="sidebar-link">异步组件</a></li><li><a href="/vue3/guide/migration/attribute-coercion.html" class="sidebar-link">attribute 强制行为</a></li><li><a href="/vue3/guide/migration/attrs-includes-class-style.html" class="sidebar-link">$attrs 包含 class &amp; style</a></li><li><a href="/vue3/guide/migration/children.html" class="sidebar-link">$children</a></li><li><a href="/vue3/guide/migration/custom-directives.html" class="sidebar-link">自定义指令</a></li><li><a href="/vue3/guide/migration/custom-elements-interop.html" class="sidebar-link">与自定义元素的互操作性</a></li><li><a href="/vue3/guide/migration/data-option.html" class="sidebar-link">Data 选项</a></li><li><a href="/vue3/guide/migration/emits-option.html" class="sidebar-link">emits 选项</a></li><li><a href="/vue3/guide/migration/events-api.html" class="sidebar-link">事件 API</a></li><li><a href="/vue3/guide/migration/filters.html" class="sidebar-link">过滤器</a></li><li><a href="/vue3/guide/migration/fragments.html" class="sidebar-link">片段</a></li><li><a href="/vue3/guide/migration/functional-components.html" class="sidebar-link">函数式组件</a></li><li><a href="/vue3/guide/migration/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/vue3/guide/migration/global-api-treeshaking.html" class="sidebar-link">全局 API Treeshaking</a></li><li><a href="/vue3/guide/migration/inline-template-attribute.html" class="sidebar-link">内联模板 Attribute</a></li><li><a href="/vue3/guide/migration/key-attribute.html" class="sidebar-link">key Attribute</a></li><li><a href="/vue3/guide/migration/keycode-modifiers.html" class="sidebar-link">按键修饰符</a></li><li><a href="/vue3/guide/migration/listeners-removed.html" class="sidebar-link">移除 $listeners</a></li><li><a href="/vue3/guide/migration/mount-changes.html" class="sidebar-link">挂载 API 变化</a></li><li><a href="/vue3/guide/migration/props-data.html" class="sidebar-link">propsData</a></li><li><a href="/vue3/guide/migration/props-default-this.html" class="sidebar-link">在 prop 的默认函数中访问 this</a></li><li><a href="/vue3/guide/migration/render-function-api.html" class="sidebar-link">渲染函数 API</a></li><li><a href="/vue3/guide/migration/slots-unification.html" class="sidebar-link">插槽统一</a></li><li><a href="/vue3/guide/migration/suspense.html" class="sidebar-link">Suspense</a></li><li><a href="/vue3/guide/migration/transition.html" class="sidebar-link">过渡的 class 名更改</a></li><li><a href="/vue3/guide/migration/transition-as-root.html" class="sidebar-link">Transition 作为根节点</a></li><li><a href="/vue3/guide/migration/transition-group.html" class="sidebar-link">Transition Group 根元素</a></li><li><a href="/vue3/guide/migration/v-on-native-modifier-removed.html" class="sidebar-link">移除 v-on.native 修饰符</a></li><li><a href="/vue3/guide/migration/v-model.html" class="sidebar-link">v-model</a></li><li><a href="/vue3/guide/migration/v-if-v-for.html" class="sidebar-link">v-if 与 v-for 的优先级对比</a></li><li><a href="/vue3/guide/migration/v-bind.html" class="sidebar-link">v-bind 合并行为</a></li><li><a href="/vue3/guide/migration/vnode-lifecycle-events.html" class="sidebar-link">VNode 生命周期事件</a></li><li><a href="/vue3/guide/migration/watch.html" class="sidebar-link">侦听数组</a></li></ul></section></li></ul> </aside> <main class="page"><div class="carbon-ads"></div>  <div class="theme-default-content content__default"><h1 id="用于迁移的构建版本"><a href="#用于迁移的构建版本" class="header-anchor">#</a> 用于迁移的构建版本</h1> <h2 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h2> <p><code>@vue/compat</code> (即“迁移构建版本”) 是一个 Vue 3 的构建版本，提供了可配置的兼容 Vue 2 的行为。</p> <p>该构建版本默认运行在 Vue 2 的模式下——大部分公有 API 的行为和 Vue 2 一致，仅有一小部分例外。使用在 Vue 3 中发生改变或被废弃的特性时会抛出运行时警告。一个特性的兼容性也可以基于单个组件进行开启或禁用。</p> <h3 id="预期用例"><a href="#预期用例" class="header-anchor">#</a> 预期用例</h3> <ul><li>将一个 Vue 2 应用升级为 Vue 3 (存在<a href="#%E5%B7%B2%E7%9F%A5%E7%9A%84%E9%99%90%E5%88%B6">限制</a>)</li> <li>迁移一个库以支持 Vue 3</li> <li>对于尚未尝试 Vue 3 的资深 Vue 2 开发者来说，迁移构建版本可以用来代替 Vue 3 以更好地学习版本之间的差异。</li></ul> <h3 id="已知的限制"><a href="#已知的限制" class="header-anchor">#</a> 已知的限制</h3> <p>虽然我们已经努力使迁移构建版本尽可能地模拟 Vue 2 的行为，但仍有一些限制可能会阻止应用的顺利升级：</p> <ul><li><p>基于 Vue 2 内部 API 或文档中未记载行为的依赖。最常见的情况就是使用 <code>VNodes</code> 上的私有 property。如果你的项目依赖诸如 <a href="https://vuetifyjs.com/zh-Hans/" target="_blank" rel="noopener noreferrer">Vuetify<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://quasar.dev/" target="_blank" rel="noopener noreferrer">Quasar<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 或 <a href="https://element.eleme.io/#/zh-CN" target="_blank" rel="noopener noreferrer">Element UI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等组件库，那么最好等待一下它们的 Vue 3 兼容版本。</p></li> <li><p>对 IE11 的支持：<a href="https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md" target="_blank" rel="noopener noreferrer">Vue 3 已经官方放弃对 IE11 的支持<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。如果仍然需要支持 IE11 或更低版本，那你仍需继续使用 Vue 2。</p></li> <li><p>服务端渲染：该迁移构建版本可以被用于服务端渲染，但是迁移一个自定义的服务端渲染设置有更多工作要做。大致的思路是将 <code>vue-server-renderer</code> 替换为 <a href="https://github.com/vuejs/vue-next/tree/master/packages/server-renderer" target="_blank" rel="noopener noreferrer"><code>@vue/server-renderer</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。Vue 3 不再提供一个包渲染器，且我们推荐使用 <a href="https://cn.vitejs.dev/guide/ssr.html" target="_blank" rel="noopener noreferrer">Vite<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 以支持 Vue 3 服务端渲染。如果你正在使用 <a href="https://zh.nuxtjs.org/" target="_blank" rel="noopener noreferrer">Nuxt.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，那最好等待一下 Nuxt 3。</p></li></ul> <h3 id="预期"><a href="#预期" class="header-anchor">#</a> 预期</h3> <p>请注意迁移构建版本旨在覆盖在文档中公开记载的 Vue 2 API 和行为。如果应用依赖了未记载的行为导致在迁移构建下运行失败，我们可能不太会调整迁移构建版本以迎合这种特殊情况。请考虑重构或移除导致这些问题行为的依赖。</p> <p>多留意一下：如果你的应用较大且复杂，即便有了迁移构建版本，整个迁移过程也会是一个挑战。如果你的应用不幸无法顺利升级，请留意我们正在计划将组合式 API 等其它 Vue 3 特性迁移回 Vue 2.7 (预计在 2021 年第三季度末)。</p> <p>如果应用在迁移构建版本中顺利运行，你<strong>可以</strong>在迁移完成之前将其发布到生产环境。尽管存在一些小的性能或包大小的问题，但应该不会显著地影响到生产环境的用户体验。当你有基于 Vue 2 行为的依赖且无法升级/替换时，可能不得不这样做。</p> <p>该迁移构建版本会从 3.1 开始提供，且会随着 3.2 的发布计划进行持续发布。我们计划在将来某个小版本号起最终停止发布迁移构建版本 (在 2021 年底前至少不会)，因此你仍需要在此之前将其迁移到标准构建版本。</p> <h2 id="升级流程"><a href="#升级流程" class="header-anchor">#</a> 升级流程</h2> <p>下面的工作流程讲述了将一个实际的 Vue 2 应用 (Vue HackerNews 2.0) 迁移到 Vue 3 的过程。完整的提交记录在<a href="https://github.com/vuejs/vue-hackernews-2.0/compare/migration" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。请注意，你的项目所需要的实际步骤可能有所不同。下面的步骤仅应被视为一般性的指南，而非严格的教程。</p> <h3 id="准备工作"><a href="#准备工作" class="header-anchor">#</a> 准备工作</h3> <ul><li>如果你仍然使用<a href="https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95" target="_blank" rel="noopener noreferrer">废弃的具名/作用域插槽语法<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，请先将其更新至 (2.6 已经支持的) 最新的语法。</li></ul> <h3 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h3> <ol><li><p>尽可能升级工具。</p> <ul><li>如果使用了自定义的 webpack 设置：将 <code>vue-loader</code> 升级至 <code>^16.0.0</code>。</li> <li>如果使用了 <code>vue-cli</code>：通过 <code>vue upgrade</code> 升级到最新的 <code>@vue/cli-service</code>。</li> <li>(替代方案) 迁移至 <a href="https://cn.vitejs.dev/" target="_blank" rel="noopener noreferrer">Vite<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> + <a href="https://github.com/underfin/vite-plugin-vue2" target="_blank" rel="noopener noreferrer">vite-plugin-vue2<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。[<a href="https://github.com/vuejs/vue-hackernews-2.0/commit/565b948919eb58f22a32afca7e321b490cb3b074" target="_blank" rel="noopener noreferrer">示例提交<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>]</li></ul></li> <li><p>在 <code>package.json</code> 里，将 <code>vue</code> 更新到 3.1，安装相同版本的 <code>@vue/compat</code>。且如果存在 <code>vue-template-compiler</code> 的话，将其替换为 <code>@vue/compiler-sfc</code>。</p> <div class="language-diff line-numbers-mode"><pre class="language-diff"><code>&quot;dependencies&quot;: {
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &quot;vue&quot;: &quot;^2.6.12&quot;,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &quot;vue&quot;: &quot;^3.1.0&quot;,
</span><span class="token prefix inserted">+</span><span class="token line">  &quot;@vue/compat&quot;: &quot;^3.1.0&quot;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  ...
</span></span>},
&quot;devDependencies&quot;: {
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &quot;vue-template-compiler&quot;: &quot;^2.6.12&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &quot;@vue/compiler-sfc&quot;: &quot;^3.1.0&quot;
</span></span>}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><a href="https://github.com/vuejs/vue-hackernews-2.0/commit/14f6f1879b43f8610add60342661bf915f5c4b20" target="_blank" rel="noopener noreferrer">示例提交<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>在构建设置中，为 <code>vue</code> 设置别名 <code>@vue/compat</code>，且通过 Vue 编译器选项开启兼容模式。</p> <p><strong>示例配置</strong></p> <details><summary><b>vue-cli</b></summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">chainWebpack</span><span class="token operator">:</span> <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    config<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'vue'</span><span class="token punctuation">,</span> <span class="token string">'@vue/compat'</span><span class="token punctuation">)</span>

    config<span class="token punctuation">.</span>module
      <span class="token punctuation">.</span><span class="token function">rule</span><span class="token punctuation">(</span><span class="token string">'vue'</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">'vue-loader'</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">options</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token operator">...</span>options<span class="token punctuation">,</span>
          compilerOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
            compatConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token constant">MODE</span><span class="token operator">:</span> <span class="token number">2</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div></details> <details><summary><b>普通 webpack</b></summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// webpack.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  resolve<span class="token operator">:</span> <span class="token punctuation">{</span>
    alias<span class="token operator">:</span> <span class="token punctuation">{</span>
      vue<span class="token operator">:</span> <span class="token string">'@vue/compat'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  module<span class="token operator">:</span> <span class="token punctuation">{</span>
    rules<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.vue$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        loader<span class="token operator">:</span> <span class="token string">'vue-loader'</span><span class="token punctuation">,</span>
        options<span class="token operator">:</span> <span class="token punctuation">{</span>
          compilerOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
            compatConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token constant">MODE</span><span class="token operator">:</span> <span class="token number">2</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div></details> <details><summary><b>Vite</b></summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// vite.config.js</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  resolve<span class="token operator">:</span> <span class="token punctuation">{</span>
    alias<span class="token operator">:</span> <span class="token punctuation">{</span>
      vue<span class="token operator">:</span> <span class="token string">'@vue/compat'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token function">vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      template<span class="token operator">:</span> <span class="token punctuation">{</span>
        compilerOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
          compatConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token constant">MODE</span><span class="token operator">:</span> <span class="token number">2</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div></details></li> <li><p>如果使用了 TypeScript，你还需要修改 <code>vue</code> 的类型，通过添加一个 <code>*.d.ts</code> 暴露其 (在 Vue 3 中已经不再展示) 默认导出。</p> <div class="language-ts line-numbers-mode"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">'vue'</span> <span class="token punctuation">{</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> CompatVue <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@vue/runtime-dom'</span>
  <span class="token keyword">const</span> Vue<span class="token operator">:</span> CompatVue
  <span class="token keyword">export</span> <span class="token keyword">default</span> Vue
  <span class="token keyword">export</span> <span class="token operator">*</span> <span class="token keyword">from</span> <span class="token string">'@vue/runtime-dom'</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></li> <li><p>在此，你的应用可能会遇到一些编译时的错误/警告 (例如对过滤器的使用)，请先修复这些错误。直至所有的编译警告都消失，当然，你也可以把编译器设置为 Vue 3 模式。</p> <p><a href="https://github.com/vuejs/vue-hackernews-2.0/commit/b05d9555f6e115dea7016d7e5a1a80e8f825be52" target="_blank" rel="noopener noreferrer">示例提交<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>在修复了这些错误之后，如果没有受制于上述的<a href="#%E5%B7%B2%E7%9F%A5%E7%9A%84%E9%99%90%E5%88%B6">限制</a>，那么应用就应该可以运行了。</p> <p>你可能会同时从命令行和浏览器控制台看到很多警告。这里提供一些一般化的小建议：</p> <ul><li><p>你可以在浏览器控制台里过滤特定的警告。建议通过使用过滤器，使自己每次专注修复同一种问题。你也可以使用类似 <code>-GLOBAL_MOUNT</code> 的否定式过滤器。</p></li> <li><p>你可以通过<a href="#%E5%85%BC%E5%AE%B9%E6%80%A7%E9%85%8D%E7%BD%AE">兼容性配置</a>关闭对特定的废弃内容的处理。</p></li> <li><p>有些警告可能来自你使用的依赖 (如 <code>vue-router</code>)。你可以通过警告的组件嵌套或调用栈的追踪信息 (可以点击展开) 来进行检查。可以优先专注于修复源自你自己代码的警告。</p></li> <li><p>如果你使用了 <code>vue-router</code>，请注意在升级至 <code>vue-router</code> v4 之前，<code>&lt;transition&gt;</code> 和 <code>&lt;keep-alive&gt;</code> 无法和 <code>&lt;router-view&gt;</code> 一起工作。</p></li></ul></li> <li><p>升级 <a href="/vue3/guide/migration/transition.html"><code>&lt;transition&gt;</code> 类名</a>。这是唯一没有运行时警告的特性。你可以在整个项目范围内做一次 <code>.*-enter</code> 和 <code>.*-leave</code> CSS 类名的搜索。</p> <p><a href="https://github.com/vuejs/vue-hackernews-2.0/commit/d300103ba622ae26ac26a82cd688e0f70b6c1d8f" target="_blank" rel="noopener noreferrer">示例提交<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>更新应用的入口以使用<a href="https://v3.cn.vuejs.org/guide/migration/global-api.html#%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84%E5%85%A8%E5%B1%80-api-createapp" target="_blank" rel="noopener noreferrer">新的全局挂载 API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p><a href="https://github.com/vuejs/vue-hackernews-2.0/commit/a6e0c9ac7b1f4131908a4b1e43641f608593f714" target="_blank" rel="noopener noreferrer">示例提交<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p><a href="https://next.vuex.vuejs.org/zh/guide/migrating-to-4-0-from-3-x.html" target="_blank" rel="noopener noreferrer">将 <code>vuex</code> 升级至 v4<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p><a href="https://github.com/vuejs/vue-hackernews-2.0/commit/5bfd4c61ee50f358cd5daebaa584f2c3f91e0205" target="_blank" rel="noopener noreferrer">示例提交<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p><a href="https://next.router.vuejs.org/zh/guide/migration/index.html" target="_blank" rel="noopener noreferrer">将 <code>vue-router</code> 升级至 v4<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。如果你还使用了 <code>vuex-router-sync</code>，可以同时将其替换为一个 store getter。</p> <p>升级过后，同 <code>&lt;router-view&gt;</code> 一起使用 <code>&lt;transition&gt;</code> 和 <code>&lt;keep-alive&gt;</code> 就要求使用新的<a href="https://next.router.vuejs.org/zh/guide/migration/index.html#router-view-%E3%80%81-keep-alive-%E5%92%8C-transition" target="_blank" rel="noopener noreferrer">基于作用域插槽的语法<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p><a href="https://github.com/vuejs/vue-hackernews-2.0/commit/758961e73ac4089890079d4ce14996741cf9344b" target="_blank" rel="noopener noreferrer">示例提交<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>逐个修复警告。注意有些特性在 Vue 2 和 Vue 3 之间存在行为冲突——例如渲染函数 API，或函数式组件 vs. 异步组件的改变。为了迁移到 Vue 3 API 而不影响到应用的其它部分，你可以通过 <a href="#%E5%9F%BA%E4%BA%8E%E5%8D%95%E4%B8%AA%E7%BB%84%E4%BB%B6%E7%9A%84%E9%85%8D%E7%BD%AE"><code>compatConfig</code> 选项</a>对单个组件选择性启用 Vue 3 的行为。</p> <p><a href="https://github.com/vuejs/vue-hackernews-2.0/commit/d0c7d3ae789be71b8fd56ce79cb4cb1f921f893b" target="_blank" rel="noopener noreferrer">示例提交<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>当修复了所有警告以后，你就可以移除迁移构建版本并切换为 Vue 3。注意如果存在基于 Vue 2 行为的依赖，你可能无法做到这一点。</p> <p><a href="https://github.com/vuejs/vue-hackernews-2.0/commit/9beb45490bc5f938c9e87b4ac1357cfb799565bd" target="_blank" rel="noopener noreferrer">示例提交<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li></ol> <h2 id="兼容性配置"><a href="#兼容性配置" class="header-anchor">#</a> 兼容性配置</h2> <h3 id="全局配置"><a href="#全局配置" class="header-anchor">#</a> 全局配置</h3> <p>兼容性特性可以进行单独禁用：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> configureCompat <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>

<span class="token comment">// 禁用某些兼容性特性</span>
<span class="token function">configureCompat</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token constant">FEATURE_ID_A</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token constant">FEATURE_ID_B</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>或者整个应用默认为 Vue 3 的行为，仅开启某些兼容性特性：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> configureCompat <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>

<span class="token comment">// 所有 Vue 3 的默认行为，并开启某些兼容性特性</span>
<span class="token function">configureCompat</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token constant">MODE</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token constant">FEATURE_ID_A</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token constant">FEATURE_ID_B</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="基于单个组件的配置"><a href="#基于单个组件的配置" class="header-anchor">#</a> 基于单个组件的配置</h3> <p>一个组件可以使用 <code>compatConfig</code> 选项，并支持与全局 <code>configureCompat</code> 方法相同的选项：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  compatConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token constant">MODE</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// 只为这个组件选择性启用 Vue 3 行为</span>
    <span class="token constant">FEATURE_ID_A</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 也可以在组件级别开启某些特性</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="针对编译器的配置"><a href="#针对编译器的配置" class="header-anchor">#</a> 针对编译器的配置</h3> <p>以 <code>COMPILER_</code> 开头的特性是针对编译器的：如果你正在使用完整构建版本 (含浏览器内编译器)，它们可以在运行时中被配置。然而如果使用构建设置，它们必须换为通过在构建配置中的 <code>compilerOptions</code> 进行配置 (参阅上述的配置)。</p> <h2 id="特性参考"><a href="#特性参考" class="header-anchor">#</a> 特性参考</h2> <h3 id="兼容性类型"><a href="#兼容性类型" class="header-anchor">#</a> 兼容性类型</h3> <ul><li>✔ 完全兼容</li> <li>◐ 部分兼容且附带注意事项</li> <li>⨂ 不兼容 (只有警告)</li> <li>⭘ 仅兼容 (没有警告)</li></ul> <h3 id="不兼容"><a href="#不兼容" class="header-anchor">#</a> 不兼容</h3> <blockquote><p>应该被修复，否则很可能会导致错误</p></blockquote> <table><thead><tr><th>ID</th> <th>类型</th> <th>描述</th> <th>文档</th></tr></thead> <tbody><tr><td>GLOBAL_MOUNT_CONTAINER</td> <td>⨂</td> <td>被挂载的应用不会替换被挂载到的元素</td> <td><a href="/vue3/guide/migration/mount-changes.html">链接</a></td></tr> <tr><td>CONFIG_DEVTOOLS</td> <td>⨂</td> <td>生产环境开发者工具现在是一个构建时的开关</td> <td><a href="https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags" target="_blank" rel="noopener noreferrer">链接<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td></tr> <tr><td>COMPILER_V_IF_V_FOR_PRECEDENCE</td> <td>⨂</td> <td><code>v-if</code> 和 <code>v-for</code> 用在相同的元素上时的处理顺序发生了改变</td> <td><a href="/vue3/guide/migration/v-if-v-for.html">链接</a></td></tr> <tr><td>COMPILER_V_IF_SAME_KEY</td> <td>⨂</td> <td><code>v-if</code> 分支不能再拥有相同的 key</td> <td><a href="/vue3/guide/migration/key-attribute.html#on-conditional-branches">链接</a></td></tr> <tr><td>COMPILER_V_FOR_TEMPLATE_KEY_PLACEMENT</td> <td>⨂</td> <td><code>&lt;template v-for&gt;</code> key 现在应该被放在 <code>&lt;template&gt;</code> 上</td> <td><a href="/vue3/guide/migration/key-attribute.html#with-template-v-for">链接</a></td></tr> <tr><td>COMPILER_SFC_FUNCTIONAL</td> <td>⨂</td> <td>单文件组件中不再支持 <code>&lt;template functional&gt;</code></td> <td><a href="/vue3/guide/migration/functional-components.html#single-file-components-sfcs">链接</a></td></tr></tbody></table> <h3 id="部分兼容且附带注意事项"><a href="#部分兼容且附带注意事项" class="header-anchor">#</a> 部分兼容且附带注意事项</h3> <table><thead><tr><th>ID</th> <th>类型</th> <th>描述</th> <th>文档</th></tr></thead> <tbody><tr><td>CONFIG_IGNORED_ELEMENTS</td> <td>◐</td> <td><code>config.ignoredElements</code> 现在改为了 <code>config.compilerOptions.isCustomElement</code> (只在浏览器编译器构建版本中)。如果使用了构建设置，<code>isCustomElement</code> 必须通过构建配置传入。</td> <td><a href="/vue3/guide/migration/global-api.html#config-ignoredelements-替换为-config-iscustomelement">链接</a></td></tr> <tr><td>COMPILER_INLINE_TEMPLATE</td> <td>◐</td> <td><code>inline-template</code> 被移除 (兼容模式只在浏览器编译器构建版本中支持)</td> <td><a href="/vue3/guide/migration/inline-template-attribute.html">链接</a></td></tr> <tr><td>PROPS_DEFAULT_THIS</td> <td>◐</td> <td>prop 的默认工厂方法不再可以访问 <code>this</code> (在兼容模式下，<code>this</code> 不是一个真实的实例——它只暴露 prop、<code>$options</code> 和注入)</td> <td><a href="/vue3/guide/migration/props-default-this.html">链接</a></td></tr> <tr><td>INSTANCE_DESTROY</td> <td>◐</td> <td><code>$destroy</code> 实例方法被移除 (在兼容模式下，只在根实例下支持)</td> <td></td></tr> <tr><td>GLOBAL_PRIVATE_UTIL</td> <td>◐</td> <td><code>Vue.util</code> 是私有的，且不再可用</td> <td></td></tr> <tr><td>CONFIG_PRODUCTION_TIP</td> <td>◐</td> <td>不再需要 <code>config.productionTip</code></td> <td><a href="/vue3/guide/migration/global-api.html#config-productiontip-移除">链接</a></td></tr> <tr><td>CONFIG_SILENT</td> <td>◐</td> <td><code>config.silent</code> 被移除</td> <td></td></tr></tbody></table> <h3 id="仅兼容-无告警"><a href="#仅兼容-无告警" class="header-anchor">#</a> 仅兼容 (无告警)</h3> <table><thead><tr><th>ID</th> <th>类型</th> <th>描述</th> <th>文档</th></tr></thead> <tbody><tr><td>TRANSITION_CLASSES</td> <td>⭘</td> <td>过渡动画的进入/离开的 class 发生了变化</td> <td><a href="/vue3/guide/migration/transition.html">链接</a></td></tr></tbody></table> <h3 id="完全兼容"><a href="#完全兼容" class="header-anchor">#</a> 完全兼容</h3> <table><thead><tr><th>ID</th> <th>类型</th> <th>描述</th> <th>文档</th></tr></thead> <tbody><tr><td>GLOBAL_MOUNT</td> <td>✔</td> <td>new Vue() -&gt; createApp</td> <td><a href="/vue3/guide/migration/global-api.html#挂载-app-实例">链接</a></td></tr> <tr><td>GLOBAL_EXTEND</td> <td>✔</td> <td>Vue.extend 被移除 (使用 <code>defineComponent</code> 或 <code>extends</code> 选项)</td> <td><a href="/vue3/guide/migration/global-api.html#vue-extend-移除">链接</a></td></tr> <tr><td>GLOBAL_PROTOTYPE</td> <td>✔</td> <td><code>Vue.prototype</code> -&gt; <code>app.config.globalProperties</code></td> <td><a href="/vue3/guide/migration/global-api.html#vue-prototype-替换为-config-globalproperties">链接</a></td></tr> <tr><td>GLOBAL_SET</td> <td>✔</td> <td><code>Vue.set</code> 被移除 (不再需要)</td> <td></td></tr> <tr><td>GLOBAL_DELETE</td> <td>✔</td> <td><code>Vue.delete</code> 被移除 (不再需要)</td> <td></td></tr> <tr><td>GLOBAL_OBSERVABLE</td> <td>✔</td> <td><code>Vue.observable</code> 被移除 (使用 <code>reactive</code>)</td> <td><a href="/vue3/api/basic-reactivity.html">链接</a></td></tr> <tr><td>CONFIG_KEY_CODES</td> <td>✔</td> <td>config.keyCodes 被移除</td> <td><a href="/vue3/guide/migration/keycode-modifiers.html">链接</a></td></tr> <tr><td>CONFIG_WHITESPACE</td> <td>✔</td> <td>在 Vue 3 中空格默认为 <code>&quot;condense&quot;</code></td> <td></td></tr> <tr><td>INSTANCE_SET</td> <td>✔</td> <td><code>vm.$set</code> 被移除 (不再需要)</td> <td></td></tr> <tr><td>INSTANCE_DELETE</td> <td>✔</td> <td><code>vm.$delete</code> 被移除 (不再需要)</td> <td></td></tr> <tr><td>INSTANCE_EVENT_EMITTER</td> <td>✔</td> <td><code>vm.$on</code>、<code>vm.$off</code>、<code>vm.$once</code> 被移除</td> <td><a href="/vue3/guide/migration/events-api.html">链接</a></td></tr> <tr><td>INSTANCE_EVENT_HOOKS</td> <td>✔</td> <td>实例不再抛出 <code>hook:x</code> 事件</td> <td><a href="/vue3/guide/migration/vnode-lifecycle-events.html">链接</a></td></tr> <tr><td>INSTANCE_CHILDREN</td> <td>✔</td> <td><code>vm.$children</code> 被移除</td> <td><a href="/vue3/guide/migration/children.html">链接</a></td></tr> <tr><td>INSTANCE_LISTENERS</td> <td>✔</td> <td><code>vm.$listeners</code> 被移除</td> <td><a href="/vue3/guide/migration/listeners-removed.html">链接</a></td></tr> <tr><td>INSTANCE_SCOPED_SLOTS</td> <td>✔</td> <td><code>vm.$scopedSlots</code> 被移除；<code>vm.$slots</code> 现在暴露函数</td> <td><a href="/vue3/guide/migration/slots-unification.html">链接</a></td></tr> <tr><td>INSTANCE_ATTRS_CLASS_STYLE</td> <td>✔</td> <td><code>$attrs</code> 现在包含了 <code>class</code> 和 <code>style</code></td> <td><a href="/vue3/guide/migration/attrs-includes-class-style.html">链接</a></td></tr> <tr><td>OPTIONS_DATA_FN</td> <td>✔</td> <td><code>data</code> 在所有情况下都必须是一个函数</td> <td><a href="/vue3/guide/migration/data-option.html">链接</a></td></tr> <tr><td>OPTIONS_DATA_MERGE</td> <td>✔</td> <td>来自 mixin 或扩展的 <code>data</code> 现在都是浅合并</td> <td><a href="/vue3/guide/migration/data-option.html">链接</a></td></tr> <tr><td>OPTIONS_BEFORE_DESTROY</td> <td>✔</td> <td><code>beforeDestroy</code> -&gt; <code>beforeUnmount</code></td> <td></td></tr> <tr><td>OPTIONS_DESTROYED</td> <td>✔</td> <td><code>destroyed</code> -&gt; <code>unmounted</code></td> <td></td></tr> <tr><td>WATCH_ARRAY</td> <td>✔</td> <td>对于一个数组的操作，侦听无法被触发了，除非使用了深度侦听</td> <td><a href="/vue3/guide/migration/watch.html">链接</a></td></tr> <tr><td>V_FOR_REF</td> <td>✔</td> <td><code>v-for</code> 内的 <code>ref</code> 不再注册 ref 数组</td> <td><a href="/vue3/guide/migration/array-refs.html">链接</a></td></tr> <tr><td>V_ON_KEYCODE_MODIFIER</td> <td>✔</td> <td><code>v-on</code> 不再支持 keyCode 修饰符</td> <td><a href="/vue3/guide/migration/keycode-modifiers.html">链接</a></td></tr> <tr><td>CUSTOM_DIR</td> <td>✔</td> <td>自定义指令钩子命名变化</td> <td><a href="/vue3/guide/migration/custom-directives.html">链接</a></td></tr> <tr><td>ATTR_FALSE_VALUE</td> <td>✔</td> <td>attribute 的绑定值为布尔值 <code>false</code> 时不再将其移除</td> <td><a href="/vue3/guide/migration/attribute-coercion.html">链接</a></td></tr> <tr><td>ATTR_ENUMERATED_COERCION</td> <td>✔</td> <td>不再特殊处理枚举类型 attribute</td> <td><a href="/vue3/guide/migration/attribute-coercion.html">链接</a></td></tr> <tr><td>TRANSITION_GROUP_ROOT</td> <td>✔</td> <td><code>&lt;transition-group&gt;</code> 不再默认渲染一个根元素</td> <td><a href="/vue3/guide/migration/transition-group.html">链接</a></td></tr> <tr><td>COMPONENT_ASYNC</td> <td>✔</td> <td>异步组件 API 改变 (现在需要 <code>defineAsyncComponent</code>)</td> <td><a href="/vue3/guide/migration/async-components.html">链接</a></td></tr> <tr><td>COMPONENT_FUNCTIONAL</td> <td>✔</td> <td>函数式组件 API 改变 (现在必须只是一个普通函数)</td> <td><a href="/vue3/guide/migration/functional-components.html">链接</a></td></tr> <tr><td>COMPONENT_V_MODEL</td> <td>✔</td> <td>组件的 v-model 修改</td> <td><a href="/vue3/guide/migration/v-model.html">链接</a></td></tr> <tr><td>RENDER_FUNCTION</td> <td>✔</td> <td>渲染函数 API 更改</td> <td><a href="/vue3/guide/migration/render-function-api.html">链接</a></td></tr> <tr><td>FILTERS</td> <td>✔</td> <td>过滤器被移除 (该选项只会影响运行时的过滤器 API)</td> <td><a href="/vue3/guide/migration/filters.html">链接</a></td></tr> <tr><td>COMPILER_IS_ON_ELEMENT</td> <td>✔</td> <td><code>is</code> 的使用现在被严格限制在 <code>&lt;component&gt;</code> 上</td> <td><a href="/vue3/guide/migration/custom-elements-interop.html">链接</a></td></tr> <tr><td>COMPILER_V_BIND_SYNC</td> <td>✔</td> <td><code>v-bind.sync</code> 被替换为带参数的 <code>v-model</code></td> <td><a href="/vue3/guide/migration/v-model.html">链接</a></td></tr> <tr><td>COMPILER_V_BIND_PROP</td> <td>✔</td> <td><code>v-bind.prop</code> 修饰符被移除</td> <td></td></tr> <tr><td>COMPILER_V_BIND_OBJECT_ORDER</td> <td>✔</td> <td><code>v-bind=&quot;object&quot;</code> 现在是顺序敏感的</td> <td><a href="/vue3/guide/migration/v-bind.html">链接</a></td></tr> <tr><td>COMPILER_V_ON_NATIVE</td> <td>✔</td> <td><code>v-on.native</code> 修饰符被移除</td> <td><a href="/vue3/guide/migration/v-on-native-modifier-removed.html">链接</a></td></tr> <tr><td>COMPILER_V_FOR_REF</td> <td>✔</td> <td><code>v-for</code> 中的 <code>ref</code> (编译器支持))</td> <td></td></tr> <tr><td>COMPILER_NATIVE_TEMPLATE</td> <td>✔</td> <td>没有特殊指令的 <code>&lt;template&gt;</code> 现在会被渲染为原生元素</td> <td></td></tr> <tr><td>COMPILER_FILTERS</td> <td>✔</td> <td>过滤器 (编译器支持)</td> <td></td></tr></tbody></table></div> <footer class="page-edit" data-v-007274aa><div class="container" data-v-007274aa><p data-v-007274aa><span class="edit-link" data-v-007274aa>
         发现了错误或者想要为文档做贡献？
          <a href="https://github.com/vuejs/docs-next-zh-cn/edit/master/src/guide/migration/migration-build.md" target="_blank" rel="noopener noreferrer" data-v-007274aa>
            在 GitHub 上编辑此页
            <span data-v-007274aa><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></span> <!----></p></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/vue3/guide/migration/introduction.html" class="prev">介绍</a></span> <span class="next"><a href="/vue3/guide/migration/array-refs.html">v-for 中的 Ref 数组</a>
      →
    </span></p></div> <div class="bsa-cpc-wrapper"><div class="bsa-cpc"></div></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/vue3/assets/js/app.9f011487.js" defer></script><script src="/vue3/assets/js/11.bea13863.js" defer></script><script src="/vue3/assets/js/140.73a6c08b.js" defer></script><script src="/vue3/assets/js/23.f23a1976.js" defer></script>
  </body>
</html>
